<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>购物车</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f4f4f4;

            color: #333;

            padding: 20px;

        }



        #app {

            width: 100%;

            max-width: 800px;

            margin: 0 auto;

            padding: 0;

            background-color: #fff;

            padding: 20px;

            border-radius: 8px;

            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        }



        h1 {

            color: #100202;

            text-align: center;

        }



        table {

            width: 100%;

            max-width: 600px;

            margin: 20px auto;

            border-collapse: collapse;

        }



        th, td {

            padding: 10px;

            text-align: center;

            border-bottom: 1px solid #ddd;

        }



        th {

            background-color: #fead7b;

            color: white;

        }



        tr:hover {

            background-color: #f5f5f5;

        }



        button {

            background-color: #f7b0de;

            color: white;

            border: none;

            padding: 5px 10px;

            cursor: pointer;

        }



        button:hover {

            background-color: #fdb6d0;

        }



        span {

            display: block;

            text-align: center;

            margin-top: 20px;

            font-size: 1.2em;

            color: #888;

        }



        ul {

            list-style-type: none;

            padding: 0;

        }



        li {

            padding: 5px 0;

        }



        .product-list {

            margin-bottom: 20px;

        }



        .product-item {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 10px;

            border-bottom: 1px solid #ddd;

        }



        .product-item:last-child {

            border-bottom: none;

        }



        .add-to-cart {

            background-color: #fcc573;

            color: white;

            border: none;

            padding: 5px 10px;

            cursor: pointer;

        }



        .add-to-cart:hover {

            background-color: hsl(104, 81%, 78%);

        }



        .welcome-page {

            text-align: center;

            margin-top: 100px;

        }



        .welcome-page h1 {

            font-size: 2em;

            margin-bottom: 20px;

        }



        .welcome-page p {

            font-size: 1.2em;

            margin-bottom: 20px;

        }



        .welcome-page button {

            background-color: #fc557c;

            color: white;

            border: none;

            padding: 10px 20px;

            cursor: pointer;

            margin: 0 10px;

        }



        .welcome-page button:hover {

            background-color: #d9dada;

        }



        .total {

            text-align: right;

            margin-top: 20px;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <div id="app">

        <div v-if="showWelcome" class="welcome-page">

            <h1>欢迎来购物</h1>

            <p>请选择你要继续的操作</p>

            <button @click="exitApp">退出</button>

            <button @click="goToShoppingList">购物</button>

        </div>

        <div v-else-if="showCart">

            <h1>购物车</h1>

            <button @click="goToAddProduct" style="margin-bottom: 20px;">添加商品</button>

            <table border="1px" v-if="cart.length > 0">

                <tr>

                    <th>编号</th>

                    <th>商品名称</th>

                    <th>单价</th>

                    <th>数量</th>

                    <th>小计</th>

                    <th>操作</th>

                </tr>

                <tr v-for="item in cart" :key="item.id">

                    <td>{{item.id}}</td>

                    <td>{{item.name}}</td>

                    <td>{{item.price}}</td>

                    <td>

                        <button @click="decreaseQuantity(item)">-</button>

                        {{item.quantity}}

                        <button @click="increaseQuantity(item)">+</button>

                    </td>

                    <td>{{item.price * item.quantity }}</td>

                    <td><button @click="removeFromCart(item)">删除</button></td>

                </tr>

                <tr>

                    <!-- 总计 -->

                    <td colspan="5" class="total">共 {{totalItems}} 件商品<br>总计：{{totalAmount}}元</td>

                    <td></td>

                </tr>

            </table>

            <span v-if="cart.length == 0">

                购物车为空，请添加商品！

            </span>

        </div>

        <div v-else>

            <h1>商品列表</h1>

            <div class="product-list">

                <div class="product-item" v-for="product in products" :key="product.id">

                    <span>{{ product.name }}￥{{ product.price }}</span>

                    <button class="add-to-cart" @click="addToCart(product)">加入购物车</button>

                </div>

            </div>

            <button @click="goToCart" style="display: block; margin: 20px auto;">添加完成</button>

        </div>

    </div>

</body>

</html>

<script src="./js/2.7.14_dist_vue.js"></script>

<script>

    new Vue({

        el: '#app',

        data: {

            msg: '购物车',

            showWelcome: true,

            showCart: false,

            products: [

                { id: '1', name: '海绵宝宝', price: 30 },

                { id: '2', name: '派大星', price: 24 },

                { id: '3', name: '喜洋洋', price: 44 },

                { id: '4', name: '懒洋洋', price: 12 },

                { id: '5', name: '光头强', price: 50 },

                { id: '6', name: '吉吉', price: 8 },

                { id: '7', name: '蜡笔小新', price: 47 },

                { id: '8', name: '黑魔仙', price: 25 },

            ],

            cart: []

        },

        computed: {

            // 计算购物车中商品的总金额

            totalAmount() {

                return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);

            },

            // 添加一个新计算属性来获取购物车中商品的总数量

            totalItems() {

                return this.cart.reduce((total, item) => total + item.quantity, 0);

            }

        },

        methods: {

            addToCart(product) {

                const existingItem = this.cart.find(item => item.id === product.id);

                if (existingItem) {

                    existingItem.quantity++;

                } else {

                    this.cart.push({ ...product, quantity: 1 });

                }

            },

            removeFromCart(item) {

                this.cart = this.cart.filter(cartItem => cartItem.id !== item.id);

            },

            increaseQuantity(item) {

                item.quantity++;

            },

            decreaseQuantity(item) {

                if (item.quantity > 1) {

                    item.quantity--;

                } else {

                    this.removeFromCart(item);

                }

            },

            exitApp() {

                window.close();

            },

            goToShoppingList() {

                this.showWelcome = false;

                this.showCart = false;

            },

            goToAddProduct() {

                this.showCart = false;

            },

            goToCart() {

                this.showCart = true;

            }

        }

    });

</script>